<template>
    <div>
<!--        <i class="el-icon-circle-plus-outline"  @click="dialogFormVisible = true"></i>-->
        <el-button type='warning' @click='dialogFormVisible = true' class='btn' style='display: inline-block'>点击添加</el-button>
        <el-dialog
            title="新增/修改课程信息"
            :visible.sync="dialogFormVisible"
            @close="clear">
            <el-form v-model="form" style="text-align: left" ref="dataForm">
                <el-form-item label="课程名" :label-width="formLabelWidth" >
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学时" :label-width="formLabelWidth" >
                    <el-input v-model="form.time" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="学分" :label-width="formLabelWidth" >
                    <el-input v-model="form.credit" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="考查方式" :label-width="formLabelWidth" >
                    <el-input v-model="form.type" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程简介" :label-width="formLabelWidth" >
                    <el-input v-model="form.detail" autocomplete="off" type='textarea'></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type='primary' :disabled='allFilled()' @click="onSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'CourseForm',
    data () {
        return {
            dialogFormVisible: false,
            form: {
                id: 0,
                name: '',
                time: '',
                credit: '',
                type: '',
                detail: ''
            },
            fileList: [],
            formLabelWidth: '120px'
        }
    },
    methods: {
        clear () {
            this.form = {
                name: '',
                time: '',
                credit: '',
                type: '',
                detail: ''
            }
        },
        allFilled() {
            return !(this.form.name &&
                this.form.time &&
                this.form.credit &&
                this.form.type &&
                this.form.detail)

        },
        onSubmit () {
            // console.log(this.form.probID)
            if(this.form.id) {
                this.$axios
                    .post('/addCourse', {
                        id: this.form.id,
                        name: this.form.name,
                        time: this.form.time,
                        credit: this.form.credit,
                        type: this.form.type,
                        detail: this.form.detail
                    }).then(resp => {
                    if (resp && resp.status === 200) {
                        this.dialogFormVisible = false
                        this.$emit('onSubmit')
                    }
                })
            } else {
                this.$axios
                    .post('/addCourse', {
                        name: this.form.name,
                        time: this.form.time,
                        credit: this.form.credit,
                        type: this.form.type,
                        detail: this.form.detail
                    }).then(resp => {
                    if (resp && resp.status === 200) {
                        this.dialogFormVisible = false
                        this.$emit('onSubmit')
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
.el-icon-circle-plus-outline {
    margin: 10px 10px 10px 10px;
    font-size: 20px;
    float: left;
    cursor: pointer;
    color: #8c939d;
}
</style>


